<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
</head>

<!-- https://www.jianshu.com/p/899b8ff8d8d9  属性和方法  -->
<!-- https://juejin.cn/post/6844903546136035342 -->

<body>
	<div id="box" name="属性" title="提示" data-age="20">
		<div class="box">
			<!-- 123 -->
			<p id="node1">1</p>
			<p id="node2">2</p>
			<p id="node3">3</p>
			<p id="node4" data-age="20">4</p>
			<img src="" name="image" alt="" />
		</div>
	</div>
	<p id="p"></p>
	<script>
		// nodeType  节点类型
		// 1 元素节点 、 2 属性节点 、 3 文本节点  、8 注释 、9 代表document 、 11 DocumentFragment类型

		// createElement 创建一个由tagName决定的HTML元素
		// document.createElement(tagname);

		// createTextNode 创建一个文本节点，文本内容为data
		// document.createTextNode(data);

		// createDocumentFragment 创建一个空白的文档片段
		// document.createDocumentFragment();

		// getElementById 通过id获取节点
		// document.getElementById("box")

		// removeChild 移除节点
		// parent.removeChild(document.getElementById("node1"))

		// replaceChild 替换节点
		// parent.replaceChild(node2, node4)

		// appendChild 添加节点
		// parent.appendChild(p)

		// insertBefore 元素之间插入元素
		// parent.insertBefore(p, node2)

		// setAttribute 设置属性，可以是内置，可以是自定义属性
		// box.setAttribute("color", "red")

		// getAttribute 获取属性，可以是内置，可以是自定义属性
		// box.getAttribute("color")

		// hasAttribute 是否有该属性
		// box.hasAttribute("color");

		// innerHTML 插入内容，
		// box.innerHTML = "innerHTML"

		// childNodes  children 子节点集合
		// console.log(parent.childNodes) // 子元素 包括文本节点
		// console.log(parent.children) // 子元素 只包含元素节点。

		// dataset
		// 获取
		// document.querySelector('#node4').dataset.age // 20
		// 设置
		// document.querySelector('#node4').dataset.age = 30

		// parentNode  parentElement
		// document.querySelector('#node4').parentNode 返回指定节点在DOM树中的父节点。这个没有父节点时好像返回本省
		// document.querySelector('#node4').parentNode 返回指定节点在DOM树中的父节点。没有就返回null

		// nextSibling  nextElementSibling
		// console.log(document.querySelector('#node3').nextSibling); // 下一个兄弟节点，包含文本节点
		// console.log(document.querySelector('#node3').nextElementSibling); //下一个兄弟元素节点

		// previousSibling previousElementSibling
		// console.log(document.querySelector('#node3').previousSibling); // 上一个兄弟节点，包含文本节点
		// console.log(document.querySelector('#node3').previousElementSibling); //上一个兄弟元素节点

		// firstChild firstElementChild
		// console.log(document.querySelector('#box').firstChild); // 第一个子节点，包含文本节点
		// console.log(document.querySelector('#box').firstElementChild); //第一个子元素节点

		// lastChild lastElementChild
		// console.log(document.querySelector('#box').lastChild); // 最后一个子节点，包含文本节点
		// console.log(document.querySelector('#box').lastElementChild); //最后一个子元素节点

		// cloneNode  true 拷贝左右属性和子孙节点 false 只拷贝本身及属性
		// document.body.appendChild(document.querySelector('#box').cloneNode(true)); //拷贝节点

		// comment 节点类型 nodeType===8  注释节点
		// console.log(document.querySelector('.box').childNodes[1]);
		// Node.ELEMENT_NODE (1)：一个元素节点，它是一个 HTML 标签，如 <div>、<p> 等。
		// Node.TEXT_NODE (3)：元素节点内的实际文本
		// Node.COMMENT_NODE (8)：注释节点，例如 <!-...-->
		// Node.DOCUMENT_NODE (9)：文档节点
		// Node.DOCUMENT_TYPE_NODE (10)：文档类型节点，例如 <!DOCTYPE html>

		// el.normalize() 合并相邻文本节点
		// var box = document.querySelector('.box')
		// box.appendChild(document.createTextNode('node1'))
		// box.appendChild(document.createTextNode('node2'))
		// box.normalize()

		// property 节点属性  attribute 标签属性  data-*自定义属性
		// console.log(box.id);// box
		// console.log(box.name); // undefine

		// console.log(box.getAttribute('id'));// box
		// console.log(box.getAttribute('name')); // 属性
		// console.log(box.getAttribute('data-age')); // 属性

		// class
		// box.className = 'test'
		// box.classList.add('ppp')
		// box.classList.remove('ppp')

		// offsetParent 相对于最近设置非relative的position的祖先定位元素的高度偏移值,如果没有相对于body
		// box.offsetParent() // body

		// document.createNodeIterator 返回一个指定元素梭包含的所有元素的迭代器
		var nodes = document.createNodeIterator(document.querySelector('#box'));
		// nodes.nextNode()

		/* =================== 创建一个自定义事件 =================== */

		// 监听 自定义事件
		document.addEventListener('eating', (event) => {
			alert(event.mingzi + '，' + event.message);
		}, false);

		// 1 创建event的对象实例。
		var event = document.createEvent('HTMLEvents') || new Event('HTMLEvents');

		// 2 参数：事件类型，|是否冒泡，|是否阻止浏览器的默认行为
		event.initEvent('eating', true, true);

		// 定义事件属性，随便自己定义
		event.mingzi = 'hello,';
		event.message = '我今天24岁';

		// 3 触发自定义事件eating
		document.dispatchEvent(event);

		/* =================== 元素样式尺寸 =================== */

		// getComputedStyle(elem)
		// 获取elem所有应用了css后的属性值。返回一个实时的 CSSStyleDeclaration 对象

		// elem.getBoundingClientRect()
		// 返回元素的大小以及相对于视口的位置。返回一个DOMRect对象。包括元素的 left right top bottom width height x y 属性值。
	</script>
</body>

</html>
